<template>
  <div id="app">
    <div style="width: 100%; height: 165px;" ref="main2"></div>
  </div>
</template>
<script>
import echarts from "echarts";
import "echarts-liquidfill";
export default {
  props: {
    data: {
      type: Array,
    },
  },
  data() {
    return {
      popsList: [],
    };
  },
  mounted() {
    this.drawChart();
  },
  methods: {
    initInfo(item) {
      // console.log(item, "itemitemitemitemitem");
      this.drawChart();
    },
    drawChart() {
      let that = this;
      console.log(that.data,"传过来的参数")
      let myChart = this.$echarts.init(this.$refs.main2);
      var titleData =[]
      var series =[]
      that.data.forEach((item, index) => {
        titleData.push({
            text: item.lx,
            x: `${16.5 * (index + 1)}%`,
            y:' 80%',
            textAlign: 'center',
            textStyle: {
                fontSize: '14',
                color: item.color,
                textAlign: 'center',
            },
        });
        series.push({
            type: 'liquidFill',
            waveAnimation: 10,
            name: item.lx,
            data: [
              {
                // NOTE 为了扩大鼠标悬浮热区 tooltip展示
                value: 1,
                itemStyle: {
                    color: 'transparent',
                },
              },
              item.rate / 100,
            ],
            radius: '50%',
            center: [`${16.7 * (index + 1)}%`, '50%'],
            label: {
              position: ['50%', '50%'],
              formatter: function () {
                  return `${item.rate}%`;
              },
              fontSize: 18,
              color: '#fff',
            },
            backgroundStyle: {
                color: 'transparent',
            },
            color: [item.color],
            backgroundStyle: {
              color: {
                type: 'radial',
                x: 0.5,
                y: 0.5,
                r: 0.55,
                colorStops: [{
                  offset: 0,
                  color: 'rgba(0,24,55, 0)'
                },
                {
                  offset: 0.75,
                  color: 'rgba(0,24,55, 0)'
                },
                {
                  offset: 1,
                  color: item.color
                }],
                globalCoord: false // 缺省为 false
              }
            },
            outline: {
              show: false
            },
            
        });
      });
      let option = {
          title: titleData,
          series: series,
          tooltip: {
              show: false,
          },
      };

      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
    }
  }
};
</script>
<style scoped lang="scss">
#main2 {
//   margin-top: 10px;
}
</style>
